
<template>
  <div class="app">
    <div class="venue_wrap df_sb">
      <div />
      <el-button
        v-if="meta.indexOf('RenovationTitleSave') > -1"
        v-preventReClick
        :loading="subLoading"
        type="primary"
        @click="onSubmit"
      >{{ translate("saveAndPub") }}</el-button>
    </div>
    <div class="mini_main df mt20">
      <div class="left">
        <div class="tabs_wrap">
          <div
            class="item"
            :class="{ active: activeTab === '0' }"
            @click="tabsClick('0')"
          >
            {{ translate('pfsz') }}
          </div>
          <div
            class="item"
            :class="{ active: activeTab === '1' }"
            @click="tabsClick('1')"
          >
            {{ translate('pttb') }}
          </div>
        </div>
        <div class="simulator_wrap">
          <div class="simulator">
            <!-- <img src="@/icons/png/StatusBar.png" class="StatusBar"> -->
            <div class="simulator_main">
              <el-carousel height="1400px">
                <el-carousel-item v-for="item in preViewList" :key="item">
                  <img :src="item" alt="">
                </el-carousel-item>
              </el-carousel>
              <!-- <tabHome :glabo-config="miniConfig" />
              <tabber /> -->
            </div>
          </div>
        </div>
      </div>
      <div class="option_wrap">
        <div v-show="activeTab === '0'" class="skin">
          <div class="f_size18 mt20 mb20"><strong>{{ translate('selPf') }}</strong></div>
          <div class="skin_list">
            <div
              v-for="(item, index) in skinList"
              :key="item.value"
              :class="{ active: item.selected == '1' }"
              class="item"
              @click="skinItemClick(index, item)"
            >
              <img class="img" :src="item.imgUrl" alt="">
              <div class="mt10">{{ item.name }}</div>
              <div v-if="item.selected == '1'" class="stauts">{{ translate('useing') }}</div>
            </div>
          </div>
          <div class="mb20 mt10">{{ translate('seldpzsd') }}</div>
          <div class="theme_list">
            <div
              v-for="(item, index) in titleList"
              :key="item.value"
              :class="{ active: item.selected === '1' }"
              class="item"
              @click="themeItemClick(index, item)"
            >
              <img class="img" :src="item.imgUrl" alt="">
              <div class="mt10">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <!--  -->
        <div v-show="activeTab === '1'" class="skin">
          <div class="f_size18 mt20 mb20"><strong>{{ translate('sel') }}{{ translate('pttb') }}</strong></div>
          <div class="icon_list">
            <div
              v-for="(item, index) in iconList"
              :key="item.value"
              :class="{ active: item.selected === '1' }"
              class="item"
              @click="IconItemClick(index, item)"
            >
              <img class="img" :src="item.imgUrl" alt="">
              <div class="mt20">{{ item.name }}</div>
              <div v-if="item.selected === '1'" class="stauts">{{ translate('useing') }}</div>
            </div>
          </div>
          <div v-if="activeIcon.imgUrl2" class="priview_icon_wrap mt20">
            <img :src="activeIcon.imgUrl2" alt="">
            <div class="triangle" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tabHome from '../home/components-option/tabHome.vue'
import tabber from '../tabbar/components-option/tabber.vue'
import { getRenovationStyleInfo, getRenovationNavicationInfo, updateStyleInfo } from '@/api'
export default {
  components: {
    tabber,
    tabHome
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
    },
    meta: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      activeTab: '0',
      iconList: [],
      skinList: [],
      titleList: [],
      preList: [],
      activeIcon: {},
      activeSkin: {},
      activeTitle: {},
      preViewList: [],
      subLoading: false,

      miniConfig: {}
    }
  },
  watch: {
    config: {
      handler(newValue) {
        this.miniConfig = newValue
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.initTheme()
    // this.initTabbarList()
  },
  methods: {
    onSubmit() {
      const { activeIcon, activeSkin, activeTitle } = this
      const temp = [activeIcon, activeSkin, activeTitle]
      this.subLoading = true
      updateStyleInfo({ param: { styleList: temp }}).then(res => {
        this.subLoading = false
        if (res.errorCode !== '000000') return
        this.$message.success(this.translate('saveScs'))
        this.$store.dispatch('app/resetMiniFlag')
        this.initTheme()
      }, () => {
        this.subLoading = false
      })
    },
    tabsClick(val) {
      this.activeTab = val
      if (val === '0') {
        this.preViewList = this.checkedPre(this.activeSkin.value, this.activeTitle.value)
      } else {
        this.preViewList = this.activeIcon.imgList || []
      }
    },
    initTheme() {
      getRenovationStyleInfo({ param: {}}).then(res => {
        if (res.errorCode !== '000000') return
        this.iconList = res.record.iconList || []
        this.skinList = res.record.skinList || []
        this.titleList = res.record.titleList || []
        this.preList = res.record.preList || []

        this.activeIcon = this.iconList.find(i => i.selected === '1') || {}
        this.activeSkin = this.skinList.find(i => i.selected === '1') || {}
        this.activeTitle = this.titleList.find(i => i.selected === '1') || {}
        this.activeIconTemp = this.iconList.find(i => i.selected === '1') || {}
        this.activeSkinTemp = this.skinList.find(i => i.selected === '1') || {}
        this.activeTitleTemp = this.titleList.find(i => i.selected === '1') || {}
        this.preViewList = this.checkedPre(this.activeSkin.value, this.activeTitle.value)
      })
    },
    checkedPre(skinValue, titleValue) {
      const { preList } = this
      return preList.find(i => i.skinValue === skinValue && i.titleValue === titleValue).imgList || []
    },
    initTabbarList() {
      getRenovationNavicationInfo({ param: {}}).then(res => {
        const Temp = [...res.record.navigationList]
        Temp.forEach(item => {
          item.nameTemp = item.name
        })
        this.$bus.$emit('miniTabbarChange', Temp)
      })
    },
    skinItemClick(index, item) {
      this.activeSkin = item
      const temp = [...this.skinList]
      temp.forEach(i => {
        i.selected = '0'
      })
      temp[index].selected = '1'
      this.skinList = temp
      this.preViewList = this.checkedPre(this.activeSkin.value, this.activeTitle.value)
      this.compareModule()
    },
    themeItemClick(index, item) {
      this.activeTitle = item
      const temp = [...this.titleList]
      temp.forEach(i => {
        i.selected = '0'
      })
      temp[index].selected = '1'
      this.titleList = temp
      this.miniConfig.color1 = item.color1
      this.miniConfig.color2 = item.color2
      this.preViewList = this.checkedPre(this.activeSkin.value, this.activeTitle.value)
      this.compareModule()
    },
    IconItemClick(index, item) {
      this.activeIcon = item
      const temp = [...this.iconList]
      temp.forEach(i => {
        i.selected = '0'
      })
      temp[index].selected = '1'
      this.iconList = temp
      this.preViewList = this.activeIcon.imgList || []
      this.compareModule()
    },
    compareModule() {
      const { activeIcon, activeSkin, activeTitle, activeIconTemp, activeSkinTemp, activeTitleTemp } = this
      let count = 0
      if (activeIcon.value !== activeIconTemp.value) {
        count++
      }
      if (activeSkin.value !== activeSkinTemp.value) {
        count++
      }
      if (activeTitle.value !== activeTitleTemp.value) {
        count++
      }
      this.$store.dispatch('app/compareThemeAction', count > 0)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.simulator_wrap {
  width: 818px;
  height: 1464px;
  padding: 32px 34px;
  background-color: #fff;
  position: relative;
  background: url("~@/icons/png/ic_shouji.png");
  background-size: 100% 100%;
  transform: scale(0.3);
  transform-origin: top left;
  .simulator {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    overflow: hidden;
    background-color: #f7f7f7;

    .simulator_main {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      .el-carousel {
        width: 100%;
        height: 100%;
        .el-carousel-item {
          width: 100%;
          height: 100%;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      &::-webkit-scrollbar {
        display: none;
      }
    }

    .StatusBar {
      height: 88px;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }
  }
}
.option_wrap {
  margin-left: 20px;
  background-color: #fff;
  flex: 1;
  height: calc(100%);
  overflow: auto;
  .skin_list {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 150px;
      height: 208px;
      border-radius: 2px;
      border: 1px solid #dfe2e8;
      padding: 20px 0;
      text-align: center;
      margin-right: 10px;
      margin-bottom: 10px;
      position: relative;
      cursor: pointer;
      .img {
        width: 70px;
        height: 134px;
      }
      .stauts {
        position: absolute;
        top: 0;
        right: 0;
        width: 56px;
        height: 26px;
        text-align: center;
        line-height: 26px;
        border-radius: 0 2px 0 8px;
        overflow: hidden;
        background: #f9deae;
        font-size: 12px;
        color: #5a1900;
      }
    }
    .active {
      border: 1px solid $primaryColor;
      background-color: #f4f7fc;
    }
  }
  .theme_list {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 115px;
      height: 136px;
      border-radius: 2px;
      border: 1px solid #dfe2e8;
      padding: 10px 0;
      text-align: center;
      margin-right: 10px;
      margin-bottom: 10px;
      cursor: pointer;
      .img {
        width: 90px;
        height: 90px;
      }
    }
    .active {
      border: 1px solid $primaryColor;
      background-color: #f4f7fc;
    }
  }
  .icon_list {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 150px;
      height: 208px;
      border-radius: 2px;
      border: 1px solid #dfe2e8;
      padding: 30px 15px;
      text-align: center;
      margin-right: 10px;
      margin-bottom: 10px;
      position: relative;
      cursor: pointer;
      .img {
        width: 120px;
        height: 120px;
      }
      .stauts {
        position: absolute;
        top: 0;
        right: 0;
        width: 56px;
        height: 26px;
        text-align: center;
        line-height: 26px;
        border-radius: 0 2px 0 8px;
        overflow: hidden;
        background: #f9deae;
        font-size: 12px;
        color: #5a1900;
      }
    }
    .active {
      border: 1px solid $primaryColor;
      background-color: #f4f7fc;
    }
  }
  .priview_icon_wrap {
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    /* &:before {
      width: 0px;
      height: 0px;
      position: absolute;
      top: -30px;
      left: 32px;
      padding: 0;
      border: 16px solid transparent;
      border-color: transparent transparent #fff transparent ;
      content: "";
      z-index: 12;
    }
    &:after {
        width: 0px;
        height: 0px;
        position: absolute;
        top: -31px;
        left: 32px;
        padding: 0;
        border: 16px solid transparent;
        border-color: transparent transparent #ccc transparent;
        content: '';
        z-index: 10
    } */
  }
}
.tabs_wrap {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  margin-bottom: 10px;
  .item {
    flex: 1;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #979797;
    cursor: pointer;
  }
  .active {
    color: #fff;
    background-color: $primaryColor;
  }
}
.mini_main {
  /* background-color: #f5f6fd; */
  height: calc(100% - 140px);
  .left {
    width: 250px;
    flex: none;
  }
}
.app {
  height: 100%;
}
</style>
